Page Headers

Page headers are used at the top of several page types. They use the .slds-page-header class as a base and are comprised of multiple components.

BaseBasedev ready

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-media slds-media--center">
    <div class="slds-media__figure">
      <svg aria-hidden="true" class="slds-icon slds-icon-standard-opportunity">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
      </svg>
    </div>
    <div class="slds-media__body">
      <p class="slds-page-header__title slds-truncate slds-align-middle" title="Rohde Corp - 80,000 Widgets">Rohde Corp - 80,000 Widgets</p>
      <p class="slds-text-body--small page-header__info">Mark Jaeckal • Unlimited Customer • 11/13/15</p>
    </div>
  </div>
</div>

The page header is a masthead that contains the Title of the page, and supporting details. For large form factors, it may include actions.

Record HomeRecord Homeprototype

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <div class="slds-media slds-media--center slds-no-space slds-grow">
        <div class="slds-media__figure">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>
        </div>
        <div class="slds-media__body">
          <p class="slds-text-heading--label">Record Type</p>
          <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-middle" title="Record Title">Record Title</h1>
        </div>
      </div>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-bottom">
      <button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
        <span class="slds-text-not-selected">
          <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>Follow</span>
        <span class="slds-text-selected">
          <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
          </svg>Following</span>
        <span class="slds-text-selected-focus">
          <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>Unfollow</span>
      </button>
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">Edit</button>
        <button class="slds-button slds-button--neutral">Delete</button>
        <button class="slds-button slds-button--neutral">Clone</button>
        <div class="slds-button--last">
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <ul class="slds-grid slds-page-header__detail-row">
    <li class="slds-page-header__detail-block">
      <p class="slds-text-heading--label-normal slds-truncate slds-m-bottom--xx-small" title="Field 1">Field 1</p>
      <p class="slds-text-body--regular slds-truncate" title="Description that demonstrates truncation with a long text field">Description that demonstrates truncation with a long text field.</p>
    </li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-heading--label-normal slds-truncate slds-m-bottom--xx-small" title="Field2 (3)">Field 2 (3)
        <button class="slds-button slds-button--icon-bare">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More Actions</span>
        </button>
      </p>
      <p class="slds-text-body--regular">Multiple Values</p>
    </li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-heading--label-normal slds-truncate slds-m-bottom--xx-small" title="Field 3">Field 3</p><a href="javascript:void(0);">Hyperlink</a></li>
    <li class="slds-page-header__detail-block">
      <p class="slds-text-heading--label-normal slds-truncate slds-m-bottom--xx-small" title="Field 4">Field 4</p>
      <p>
        <span title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncat...</span>
      </p>
    </li>
  </ul>
</div>

Page header record home contains up to four compact layout fields. They're contained in the .slds-page-header__detail-row div. That div contains the top and bottom spacing needed for this version of the page header.

When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the .slds-truncate class. Two line truncation must be achieved using JavaScript.

The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field.

Record Title

  • Display Record Type icon to the left of the title
  • Record Type is displayed above the title
  • When required, follow action is displayed to the right of the record title
  • Display one line of text, truncate when the length conflicts with the page level actions

As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate mailto: or web url. Do not modify the user's input, display as intended.

When text is truncated, display full field text in browser tooltip on hover.

Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the .slds-truncate class. Display the full address via browser tooltip.

Object HomeObject Homedev ready

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <p class="slds-text-heading--label">Leads</p>
      <div class="slds-grid">
        <div class="slds-grid slds-type-focus slds-no-space">
          <h1 class="slds-page-header__title slds-truncate" title="My Leads (truncates)">My Leads (truncates)</h1>
          <button class="slds-button slds-button--icon-bare slds-shrink-none slds-align-middle slds-m-left--x-small">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">View More</span>
          </button>
        </div>
      </div>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">New Lead</button>
        <div class="slds-button--last">
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-grid">
    <div class="slds-col slds-align-bottom">
      <p class="slds-text-body--small page-header__info">10 items • sorted by name</p>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-bottom">
      <button class="slds-button slds-button--icon-more" aria-haspopup="true">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
        </svg>
        <span class="slds-assistive-text">Settings</span>
        <svg aria-hidden="true" class="slds-button__icon button__icon--xx-small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
      </button>
      <button class="slds-button slds-button--brand slds-m-left--x-small slds-hide" aria-hidden="true">Save</button>
      <button class="slds-button slds-button--icon-more slds-m-left--xx-small" aria-haspopup="true">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
        </svg>
        <span class="slds-assistive-text">Table</span>
        <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
      </button>
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--icon-border slds-not-selected">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
          </svg>
          <span class="slds-assistive-text">Chart</span>
        </button>
        <button class="slds-button slds-button--icon-border slds-not-selected">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
          </svg>
          <span class="slds-assistive-text">Filter List</span>
        </button>
        <button class="slds-button slds-button--icon-more">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
          </svg>
          <span class="slds-assistive-text">Sort</span>
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More</span>
        </button>
      </div>
    </div>
  </div>
</div>

The title for the Object Home page header is sorting component. The .slds-text-focus class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link.

This component is created entirely of existing components like grids, buttons, button groups, and icons.

Related ListRelated Listprototype

Preview

Code

<div class="slds-page-header" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <nav class="slds-m-bottom--xx-small" role="navigation" aria-label="Breadcrumbs">
        <ol class="slds-breadcrumb slds-list--horizontal">
          <li class="slds-breadcrumb__item slds-text-heading--label"><a href="javascript:void(0);">Accounts</a></li>
          <li class="slds-breadcrumb__item slds-text-heading--label"><a href="javascript:void(0);">Company One</a></li>
        </ol>
      </nav>
      <h1 class="slds-page-header__title slds-truncate" title="Contacts (will truncate)">Contacts (will truncate)</h1>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <div class="slds-button-group">
        <button class="slds-button slds-button--neutral">Add Contact</button>
        <div class="slds-button--last">
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
            <span class="slds-assistive-text">More Actions</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-grid">
    <div class="slds-col slds-align-bottom">
      <p class="slds-text-body--small page-header__info">10 items • sorted by name</p>
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-bottom">
      <button class="slds-button slds-button--icon-more" aria-haspopup="true">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
        </svg>
        <span class="slds-assistive-text">Table</span>
        <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
      </button>
      <div class="slds-button-group">
        <button class="slds-button slds-button--icon-border slds-not-selected">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
          </svg>
          <span class="slds-assistive-text">Chart</span>
        </button>
        <button class="slds-button slds-button--icon-border slds-not-selected">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
          </svg>
          <span class="slds-assistive-text">Filter List</span>
        </button>
        <button class="slds-button slds-button--icon-more">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
          </svg>
          <span class="slds-assistive-text">Sort</span>
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">More</span>
        </button>
      </div>
    </div>
  </div>
</div>

The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated. It is also created using multiple other components shown in the dependencies tab.

Component Overview

Usage

This table gives you a quick overview of the unique SLDS CSS classes that can be applied to create page headers.
Class NameUsage
.slds-page-header
Applied to:

<div>

Outcome:

Applies background color and padding

Required:

Required

Comments:

Required on the main container for the page header

.slds-page-header__title
Applied to:

<p>

Outcome:

Page title (header text).

Required:

No, optional element or modifier

Comments:

--

.page-header__info
Applied to:

<p>

Outcome:

For the small supporting info text after the heading

Required:

No, optional element or modifier

Comments:

--

.slds-page-header__detail-row
Applied to:

<div>

Outcome:

Creates margins around the detail section of record home

Required:

No, optional element or modifier

Comments:

Only the record home page header contains this detail area